<template>
  <div class="main">
    <div class="logo">网站后台管理系统</div>
    <div class="menu">
      <el-menu
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        text-color="#4E5969"
        :unique-opened="true"
      >
        <div v-for="(item, index) in menuList" :key="index">
          <el-submenu
            v-if="item.childMenu"
            :key="item.menuId"
            :index="String(item.menuId)"
          >
            <template slot="title">
              <i :class="item.menuIcon"></i>
              <span slot="title">{{ item.menuName }}</span>
            </template>
            <el-menu-item
              v-for="i in item.childMenu"
              :index="String(i.menuId)"
              :key="i.menuId"
              @click="handleRouter(i)"
            >
              {{ i.menuName }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            v-else-if="!item.childMenu"
            @click="handleRouter(item)"
            :index="String(item.menuId)"
            :key="item.menuId"
          >
            <i :class="item.menuIcon"></i>
            <span slot="title">{{ item.menuName }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
  </div>
</template>
<script>
// import { routerList } from "@/router";
import { mapMutations } from "vuex";
// import { localGet } from "@/util/util";
import { getMenuListApi } from "@/api/modules/menu.api";
import { localGet, localSet } from "@/util/util";

export default {
  data() {
    return {
      data: [],
      menuIndex: 0,
      defaultActive: "",
      isAdmin: false,
      menuList: [],
    };
  },
  watch: {
    menuIndex(data) {
      this.defaultActive = data.split(",")[1];
    },
  },
  mounted() {
    this.getMenu();
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    handleRouter(item) {
      const parentNode = this.menuList.filter((res) => res.menuId === item.pid);
      const routerList = [];
      if (parentNode[0].childMenu) {
        delete parentNode[0].childMenu;
      }
      routerList.push(parentNode[0]);
      routerList.push(item);

      localSet("router", routerList);
      // this.menuIndex = `${item.pid},${item.menuId}`;
      // console.log("routerList", this.menuIndex);
      if (item.menuPath) {
        this.$router.replace(item.menuPath);
      }
      this.setBreadcrumb([
        {
          name: parentNode[0].menuName,
          path: parentNode[0].menuPath,
        },
        {
          name: item.menuName,
          path: item.menuPath,
        },
      ]);
    },
    async getMenu() {
      // 获取菜单
      this.menuList = JSON.parse(localGet("userInfo")).menuList || [];
      // console.log(
      //   'localGet("userInfo")',
      //   JSON.parse(localGet("userInfo")).menuList
      // );
      // 判断是否存在菜单缓存
      if (localGet("router")) {
        const routerList = JSON.parse(localGet("router"));
        const breadList = [];
        routerList.forEach((item) => {
          // 获取默认展开菜单
          this.menuIndex += `${item.menuId},`;
          // 获取面包屑信息
          breadList.push({
            name: item.menuName,
            path: item.menuPath,
          });
        });
        // 添加面包屑信息
        this.setBreadcrumb(breadList);
      } else {
        // 默认展示第一个菜单
        this.menuIndex = `${this.menuList[0].menuId},${this.menuList[0].childMenu[0].menuId}`;
        this.setBreadcrumb([
          {
            name: this.menuList[0].menuName,
            path: this.menuList[0].menuPath,
          },
          {
            name: this.menuList[0].childMenu[0].menuName,
            path: this.menuList[0].childMenu[0].menuPath,
          },
        ]);
        await this.$router.replace(this.menuList[0].childMenu[0].menuPath);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
.menu {
  border: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-menu {
  border: 0;
}

.el-menu-vertical-demo[data-v-0cd91d38]:not(.el-menu--collapse) {
  width: 219px;
}

.main {
  display: flex;
  flex-direction: column;
  background: #fff;
  width: 220px;

  .logo {
    height: 60px;
    width: 100%;
    line-height: 60px;
    text-align: center;
    color: #4e5969;
    font-weight: 500;
    font-size: 18px;
    border-bottom: 1px rgba(220, 222, 226, 1) solid;
  }

  .menu {
    flex: 1;
    background: #fff;
    font-weight: 500;
    border-right: 1px rgba(220, 222, 226, 1) solid;
  }
}
</style>
